<template>
	<view class="shop-list">
		<view class="shop-item" v-for="(item, index) in shopList" :key="item.create_time" v-if="shopList.length" @tap="goShop(item.shop_id)">
			<view class="title">
				<view class="shop-info">
					<image src="/static/icon/productDetails/store.png" class="t-img"/>
					<view> {{item.name}} </view>
					<Tag :text="item.type==1?'个人':'商家'" :bgc="item.type==1?'#FF9B05':'#FF3B1E'" />
				</view>
				<view class="collect" @tap="cancelCollect(item.shop_id, index)"></view>
			</view>
			<view class="goods-info" v-if="item.shop_arr.length">
				<view v-for="(goods, index) in item.shop_arr" :key="goods">
					<view class="goods-item" v-if="index<=1">
						<image :src="goods.img" class="goods-img" />
						<view class="goods-name">
							<Tag :text="item.type==1?'个人':'商家'" :bgc="item.type==1?'#FF9B05':'#FF3B1E'" />
							{{goods.name}}
						</view>
						<view class="intro"> {{goods.msg}} </view>
						<view class="ps">
							<view class="km"> {{goods.distance}} | 配送 约￥{{goods.delivery_money}}</view>
							<view class="rate"> {{goods.comment_score}}分 </view>
						</view>
						<view class="shop-name"> {{item.name}} </view>
						<view class="price-box">
							<view class="price"> ￥<text>{{goods.price}}</text></view>
							<view class="num"> 销量{{goods.sales}} </view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-null" v-else>
				<image src="/static/icon/components/empty.png" class="g-img"/>
				<view class="text"> 该店铺还没有发布商品 </view>
			</view>
		</view>
		<Empty txt="关注列表空空如也~" v-else/>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import Tag from '@/components/Tag.vue';
	import { CollectShopApi } from '@/service/index.js'
	import Empty from '@/components/Empty.vue'
	const props = defineProps(['shopList'])
	const cancelCollect = (shop_id, index) => {
		CollectShopApi({shop_id}).then(res => {
			props.shopList.splice(index, 1)
		})
	}
	const goShop = (id) => {
		uni.navigateTo({
			url: `/pages/shop/shop?shop_id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.shop-item {
		width: 100%;
		margin-bottom: 10px;
		border-radius: 10px;
		padding: 12px 0 10px;
		background-color: #fff;
		box-sizing: border-box;
		.title {
			padding: 0 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.t-img {
				width: 18px;
				height: 18px;
			}
			.shop-info {
				display: flex;
				justify-content: center;
				align-items: center;
				view {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
					margin: 0 6px;
				}
			}
			.collect {
				width: 20px;
				height: 20px;
				background: url('/static/icon/productDetails/a-collect.png') no-repeat center center;
				background-size: 100% 100%;
			}
		}
		.goods-info {
			margin-top: 12px;
			display: grid;
			gap: 0 10px;
			grid-template-columns: repeat(2, 1fr);
			.goods-item {
				.goods-img {
					width: 100%;
					max-height: 200px;
					border-radius: 10px 10px 0 0;
					margin-bottom: 8px;
				}
				.goods-name {
					padding: 0 7px;
					color: #333333;
					font-size: 14px;
					margin-left: 4px;
					font-weight: 500;
					line-height: 16px;
				}
				.intro {
					padding: 0 7px;
					font-weight: 400;
					font-size: 11px;
					color: #999999;
					line-height: 13px;
					margin: 8px 0 6px;
				}
				.ps {
					padding: 0 7px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.km {
						font-weight: 400;
						font-size: 11px;
						color: #999999;
						line-height: 13px;
					}
					.rate {
						font-weight: 400;
						font-size: 11px;
						color: #FF3B1E;
						line-height: 13px;
					}
				}
				.shop-name {
					padding: 0 7px;
					font-weight: 400;
					font-size: 11px;
					color: #D68C1C;
					line-height: 13px;
					margin: 6px 0;
				}
				.price-box {
					padding: 0 7px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						font-weight: 500;
						font-size: 12px;
						color: #FF3B1E;
						text {
							font-size: 14px;
						}
					}
					.num {
						font-weight: 400;
						font-size: 11px;
						color: #999999;
						line-height: 13px;
					}
				}
			}
		}
		.goods-null {
			height: 200px;
			text-align: center;
			.g-img {
				width: 150px;
				height: 150px;
				margin: 10px 0;
			}
			.text {
				color: #AAAAAA;
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
			}
		}
	}
</style>